<div class="p-8 overflow-auto">
  <div class="text-lg mb-4">
    {{ 'PAC.Project.Files' | translate: {Default: 'Project Files'} }}
  </div>

  <div class="flex">
    <button mat-flat-button color="primary"
      (click)="openMaterials()">
      <mat-icon fontSet="material-icons-outlined">attach_file</mat-icon>
      <span>{{'PAC.Project.UploadFiles' | translate: {Default: 'Upload Files'} }}</span>
    </button>
  </div>
  <table mat-table
       [dataSource]="files()" multiTemplateDataRows>
    @for (column of columnsToDisplay; track column.name) {
      <ng-container matColumnDef="{{column.name}}">
        <th mat-header-cell *matHeaderCellDef> {{'PAC.Project.FileColumn.' + column.name | translate: {Default: column.label} }} </th>
        <td mat-cell *matCellDef="let element"> {{element[column.name]}} </td>
      </ng-container>
    }
    <ng-container matColumnDef="expand">
      <th mat-header-cell *matHeaderCellDef aria-label="row actions">&nbsp;</th>
      <td mat-cell *matCellDef="let element">
        <button mat-icon-button aria-label="expand row" (click)="(expandedElement = expandedElement === element ? null : element); $event.stopPropagation()">
          @if (expandedElement === element) {
            <mat-icon>keyboard_arrow_up</mat-icon>
          } @else {
            <mat-icon>keyboard_arrow_down</mat-icon>
          }
        </button>
      </td>
    </ng-container>

    <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
    <ng-container matColumnDef="expandedDetail">
      <td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplayWithExpand.length">
        <div class="example-element-detail"
            [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
          <div class="w-full min-h-[5rem] flex-1 flex flex-col justify-start items-stretch relative">
            <div class="absolute top-0 left-0 w-full p-2 text-ellipsis bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-violet-500">
                <span>url: {{element.url}}</span>
            </div>
            @if (isImage(element)) {
              <img class="flex-1" [src]="element.url"/>
            }
          </div>
        </div>
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="columnsToDisplayWithExpand"></tr>
    <tr mat-row *matRowDef="let element; columns: columnsToDisplayWithExpand;"
        class="example-element-row"
        [class.example-expanded-row]="expandedElement === element"
        (click)="expandedElement = expandedElement === element ? null : element">
    </tr>
    <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
  </table>
</div>